<template>
  <div class="set-new">
    <div class="panel">
      <div class="title">绑定新手机号</div>
      <div class="content">
        <div class="input-group clearfix">
          <div class="left-title">手机号：</div>
          <div class="right-content">
            <el-input placeholder="请输入新的手机号" v-model="new_phone"></el-input>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">验证码：</div>
          <div class="right-content item2">
            <el-input placeholder="请输入手机验证码" v-model="code"></el-input>
            <button class="get-code orange-btn" :style="sendBtn.style" :disabled="sendBtn.disabled" @click="sendCode(new_phone)">{{sendBtn.text}}</button>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title"></div>
          <div class="right-content">
            <button class="gray-btn" @click="handleConfirm">确认</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { changePhone } from 'api/user'
  import { sendCode, checkCode } from 'api/common'
  export default {

    name: 'check-before',

    data() {
      return {
        new_phone: '',
        code: '',
        sendBtn: {
          style: 'background-color:#D66D28;color:#fff;border-radius:0;',
          text: '获取验证码',
          disabled: false
        },
        sending: {
          style: 'background-color:rgba(214,109,40,0.7);color:#fff;border-radius:0;',
          text: '60s后重新获取',
          disabled: true
        },
        afterSend: {
          style: 'background-color:#D66D28;color:#fff;border-radius:0;',
          text: '重新获取验证码',
          disabled: false
        }
      };
    },
    methods: {
      sendCode(phone) {
        sendCode({
          phone
        })
        .then(res => {
          // 倒计时，按钮状态变化
          let count = 60
          this.sendBtn = this.sending
          this.cTimer = setInterval(() => {
            if (count > 0) {
              count--
              this.sending.text = count + 's后重新获取'
            } else {
              clearInterval(this.cTimer)
              count = 60
              this.sending.text = '60s后重新获取'
              this.sendBtn = this.afterSend
            }
          }, 1000);
        })
        .catch(err => {
          this.$message({
            message: err.msg,
            type: 'error'
          })
        })
      },
      handleConfirm() {
        checkCode({
          phone: this.new_phone,
          code: this.code
        })
        .then(res => {
          console.log(res)
          if (res.flag) {
            changePhone({ phone_no: this.new_phone })
            .then(res => {
              console.log(res)
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              location.href = '#/personal/security/index'
            })
            .catch(err => {
              this.$message({
                message: err.msg,
                type: 'error'
              })
            })
          } else {
            this.$message({
              message: '验证码错误',
              type: 'warning'
            })
          }
        })
        .catch(err => {
          console.log(err)
          this.$message({
            message: err.msg,
            type: 'warning'
          })
        })
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.set-new{
  .panel{
    .title{
      background-color: #f4f4f4;
      padding: 0 20px;
      text-align: left;
      height: 40px;
      line-height: 40px;
    }
    .content{
      padding: 30px 0;
      border-bottom: 1px solid #e5e6e7;
    }
    .input-group{
      width: 420px;
      margin: 20px auto;
      .left-title{
        width: 70px;
        height: 30px;
        line-height: 30px;
        float: left;
      }
      .right-content{
        width: 350px;
        float: left;
        position: relative;
        &.item2{
          .el-input{
            width: 251px;
          }
        }
        .get-code.orange-btn{
          width: 102px;
          font-size: 14px;
          height: 36px;
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          width: 100px;
        }
      }
    }
  }
}
</style>